<template>
    <view class="page-branch-member">
        <u-sticky>
			<!-- 只能有一个根元素 -->
			<view class="search-sticky">
				<u-row gutter="0">
					<u-col span="4" v-for="(item,index) in tab.list" :key="index">
						<view class="text-center">
                            <view class="inline-block" :class="tab.current == index ? 'current' : ''" @click="changeTab(index)">
                                <text class="name">{{ item.name }}</text>
                            </view>
                        </view> 
					</u-col>
				</u-row>
			</view>
		</u-sticky>
        <view class="p-4" v-if="tab.list[tab.current].records.length == 0">
            <u-empty text="暂无数据" mode="list"></u-empty>
        </view> 
        <u-cell-group :border="false" class="list">
            <u-cell-item v-for="(item,index) in tab.list[tab.current].records" :key="index" :arrow="false">
                <template #icon>
                    <u-image width="88rpx" height="88rpx" :src="proxy.$util.getFullImage(item.appUserListVo.avatar)" shape="circle"></u-image>
                </template>
                <view slot="title" class="ml-4">
                    <view class="flex-between">
                        <view>
                            <text class="font-bold mr-2">{{ item.appUserListVo.nickname || item.appUserListVo.username }}</text>
                            <u-tag :text="getRoleName(item.roleId)" shape="circle" type="info" mode="light" size="mini" />
                        </view>
                        <view @click="showAction(item)">
                            <text :class="'status-' + item.status">{{ getStatusName(item.status) }}</text>
                            <u-icon class="ml-2" name="edit-pen" v-if="item.roleId == 3"></u-icon>
                        </view>
                    </view>
                    <view class="desc">
                        <text>注册：{{ item.createTime }}</text>
                        <text class="ml-2">到期：{{item.appUserListVo.membersDate}}</text>
                    </view>
                    
                </view>                
            </u-cell-item>
        </u-cell-group>
        <!-- <view class="fly-card">
            <view class="item" v-for="(item,index) in tab.list[tab.current].records" :key="index">
                <view class="thumb">
                    <u-image :src="proxy.$util.getFullImage(item.appUserListVo.avatar)" width="80rpx" height="80rpx" shape="circle"></u-image>
                </view>
                <view class="content">
                    <view class="title font-bold">{{ item.appUserListVo.nickname || item.appUserListVo.username }}</view>
                    <view class="desc mt-2">
                        <fly-info label="角色" :value="getRoleName(item.roleId)"></fly-info>
                        <fly-info label="到期" :value="item.appUserListVo.membersDate"></fly-info>
                        <fly-info label="状态">
                            <text :class="'status-' + item.status">{{ getStatusName(item.status) }}</text>
                        </fly-info>
                    </view>
                    <view class="float-right" v-if="item.roleId == 3"><u-button class="btn-red" size="mini" @click="showAction(item)">处理</u-button></view>
                </view>
            </view>
        </view> -->
        <u-action-sheet :list="actionSheet.list" v-model="actionSheet.isShow" @click="selectActionSheet"></u-action-sheet>
    </view>
</template>
<script setup lang="ts">
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
import FlyInfo from '@/components/FlyInfo/index';
import {onShow, onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
let pageParams = reactive();
let list = ref([]);
let tab = reactive({
	current: 0,
	list:[
		{id:0, name: '全部会员', records: [], current: 1, size: 10, total:0},
		{id:1, name: '30天内到期', records: [], current: 1, size: 10, total:0},
		{id:2, name: '已到期会员', records: [], current: 1, size: 10, total:0},
	],
	invitationId: null,
});
let actionSheet = reactive({
    isShow: false,
    row: {},
    list: [
        {id: '0', text: '正常'},
        {id: '1', text: '拉黑'},
        {id: '2', text: '冻结'},
    ],
});
const changeTab = (i) => {
	tab.current = i;
    if(tab.list[tab.current].records.length == 0){
        getList('refresh');
    }
}
const getList = (type) => {
    let obj = tab.list[tab.current];
      if(type == 'refresh'){  
        obj.current = 1;
        obj.records = [];
      }else{
        if(obj.total > obj.records.length){
          obj.current ++;        
        }else{
          uni.showToast({title:'没有更多了',icon: 'none'});
          return;
        }
      };
      let params = {
        current: obj.current,
        size: obj.size,
        type: obj.id,
        // status: 0,
      };
      proxy.$http('get', '/admin/userGuilds/getGuildsMemberInfo/'+ pageParams.guildId, proxy.$util.getParam(params) ,(data,msg) => {
        obj.records = obj.records.concat(data);
        obj.total = data.total;
      },msg => {

      })
};
const getRoleName = (val) => {
    let name = '普通会员';
    switch(val){
        case 1: 
            name = '会长';
            break;
        case 2: 
            name = '分会长';
            break;
        case 3:
            name = '普通会员';
            break;
    }
    return name;
}
const getStatusName = (val) => {
    let name = '正常';
    switch(val){
        case '0': 
            name = '正常';
            break;
        case '1': 
            name = '已拉黑';
            break;
        case '2':
            name = '已冻结';
            break;
    }
    return name;
}
const showAction = (row) => {
    if(row.role == 3){
        actionSheet.info = row;
        actionSheet.isShow = true;
    }
}
const selectActionSheet = (index) => {
    let obj = actionSheet.list[index];
    let params = {
        userId: actionSheet.info.userId,
        status: obj.id,
    }
    proxy.$http('get', '/admin/userGuilds/blacklist/'+actionSheet.info.guildId, params, (data,msg) => {
        uni.$u.toast('提交成功');
        getList();
    })
}
onPullDownRefresh(() => {
	getList();
	setTimeout( () => {
		uni.stopPullDownRefresh();
	}, 1000);
});
onReachBottom(() =>{
	getList();
});
onLoad(e => {
    pageParams = e;
})
onShow(() => {    
	getList('refresh');
})
</script>